<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="courseList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="课程" width="648">
        <template slot-scope="scope">
          <div class="course-info-block">
            <img :src="scope.row.image" alt="" />
            <span class="shenglue2">{{ scope.row.courseName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额" width="186" align="center">
        <template slot-scope="scope">
          <span class="course-value">¥ {{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <span class="delete-course" @click="deleteCourse(scope.row.id)"
            >×</span
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="button-group">
      <div class="width-container">
        <div class="all-value">
          总金额：
          <span class="value-number"> ¥ {{ allValue }} </span>
        </div>
        <div :class="['to-oder', { no: !selection.length }]" @click="setOder">
          去结算
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { delCartCourse, getCartCourse } from "@/services/user";
export default {
  data() {
    return {
      courseList: [],
      allValue: 0,
      selection: [],
    };
  },
  methods: {
    getCourseList() {
      getCartCourse().then((res) => {
        this.courseList = res.data.data;
      });
    },
    handleSelectionChange(selection) {
      this.allValue = 0;
      this.selection = selection;
      selection.forEach((item) => {
        this.allValue += item.price;
      });
    },
    setOder() {
      if (this.selection.length) {
        let courseIds = [];
        this.selection.forEach((each) => {
          courseIds.push(each.id);
        });
        this.$router.push({
          path: "/shoppingCart/oder",
          query: {
            courseIds,
            total: this.allValue,
          },
        });
      }
    },
    deleteCourse(courseId) {
      delCartCourse({ courseId }).then((res) => {
        this.$message(res.data.msg);
        this.getCourseList();
      });
    },
  },
  created() {
    this.getCourseList();
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  &::before {
    height: 0;
  }
  .course-info-block {
    display: flex;
    height: 90px;
    img {
      width: 160px;
    }
    span {
      width: 464px;
      padding-top: 4px;
      margin-left: 24px;
      font-size: 16px;
      color: #07111b;
    }
  }
  .course-value {
    font-weight: bold;
  }
  .delete-course {
    cursor: pointer;
    font-size: 40px;
    color: #b7bbbf;
    font-weight: lighter;
  }
}
.button-group {
  position: fixed;
  bottom: 0;
  height: 150px;
  display: flex;
  left: 0;
  right: 0;
  align-items: center;
  background-color: white;
  .width-container {
    width: 1152px;
    height: 54px;
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 auto;
    .all-value {
      font-size: 12px;
      color: #07111b;
      .value-number {
        font-size: 16px;
        color: #f01414;
        font-weight: 700;
      }
    }
    .to-oder {
      margin-left: 38px;
      padding: 13px 32px;
      color: #fff;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      user-select: none;
      font-weight: 200;
      background: #f01414;
      border-radius: 4px;
    }
    .no {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}
</style>